<template>
	<view class="selects">
		<!-- 服务类型 -->
		<select-type type="service" :value="service.value" :list="service.list" @callback="callbackSelect" />
		<!-- 认证类型 -->
		<u-select type="auth" :value="auth.value" :list="auth.list" @callback="callbackSelect" />
		<!-- 排序 -->
		<u-select type="order" :value="order.value" :list="order.list" @callback="callbackSelect" />
		<!-- 更多筛选 -->
		<select-more type="more" :value="more.value" :list="more.list" @callback="callbackMore" />
	</view>
	<view class="list">
		<skeleton :loading="showSkeleton" :skeleton="['list_merchant']"></skeleton>
		<template v-for="(item,index) in dataList" :key="index">
			<list-merchant-item :item="item" :index="index" />
		</template>
	</view>
	<!-- 空数据 -->
	<list-empty v-if="!dataList.length&&!showSkeleton" />
	<!-- 更多数据 -->
	<uni-load-more :status="loadMore.status" v-if="loadMore.show" :contentText="loadMore.txt"></uni-load-more>
</template>
<script setup>
	import { ref, reactive, watch, defineComponent } from 'vue';
	import useParams from './useParams.js';
	import useGetList from '@/common/hooks/useGetList.js';
	import selectType from './select-type.vue';
	import selectMore from './select-more.vue';
	import listMerchantItem from './list-merchant-item.vue';
	import listEmpty from './list-empty.vue';
	defineComponent({
		selectType,
		selectMore,
		listMerchantItem,
		listEmpty
	});
	const data_props = defineProps({
		keyword: [String, Number],
		service: Object
	});
	const data = reactive({
		searchParams: {}
	});
	const emits = defineEmits(['loaded']);
	const navHeight = ref(`${getApp().globalData.navHeight}px`);
	const { getService, params, service, auth, price, order, more, callbackSelect, callbackMore, searchChange } = useParams();
	const { getDataList, dataList, page, loadMore, showSkeleton, reachBottom } = useGetList();
	getService();
	watch(params, (newVal) => {
		data.searchParams = Object.assign({}, newVal);
		init();
	}, { immediate: false, deep: true });
	watch([() => data_props.keyword, () => data_props.service], (newVal) => {
		const [keyword, service] = newVal;
		if (!keyword && !service.value) {
			searchChange({ value: keyword });
		} else if (keyword) {
			searchChange({ value: keyword });
		} else if (service.value) {
			callbackSelect(service);
		}
	}, { immediate: true, deep: true });
	async function init(showLoading = true) {
		await getDataList({
			url: '/crm/search/asyncmt',
			params: {
				...data.searchParams
			},
			showLoading: showLoading
		});
		emits('loaded');
	}
	// 搜索
	function search(o) {
		switch (o.type) {
			case 'keywords':
				searchChange(o);
				break;
			case 'service':
				callbackSelect(o);
				break;
		}
	}
	defineExpose({
		search,
		reachBottom,
		init
	})
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.selects {
		position: -webkit-sticky;
		position: sticky;
		top: v-bind(navHeight);
		z-index: 9;
		display: flex;
		justify-content: space-around;
		padding: 10rpx 0;
		background-color: #F3F5F7;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			z-index: 999;
			width: 100%;
			height: 100%;
			background-color: #F3F5F7;
		}
	}
	.list {
		padding: 0 28rpx;
	}
</style>
